UI/UX Figma Web AND Mobile Design

Actual Price:₦ 240,000.00

Tuition Fee(Pay Just 50%) : ₦ 120,000.00

/ USD: $ 157.89

Become a Designer in 2022! Master Mobile and Web Design, User Interface + User Experience (UI/UX Design), HTML, and CSS

Using the latest best practices in Web Design and Mobile Design as well as User Interface and User Experience Design (UI/UX), this course focuses on efficiently getting you from zero to a point where you can get hired or win freelance contracts. We will use in demand tools like Figma to show you a full workflow from start to finish.

Course Objectives:

 

Build beautifully designed web and mobile projects for your customers using modern tools used by top companies in 2022

Get hired as a Designer or become a freelancer that can work from anywhere and for anyone. Designers are in high demand!

Includes 100+ assets and premium design templates that you can keep and use to customize for all your future projects

Master Figma for your design needs then learn to convert your designs into a live HTML an CSS website

Have an amazing design portfolio customized and professionally completed by the end of the course (we provide it for you!)

Master both Web and Mobile design principles and how to go from sketching to fully fledged high fidelity designs that will wow customers

Learn to design for all types of devices using Figma and other tools used by some of the top designers in the world

Learn to use HTML5 and CSS3 to make your designs come to life and create fully working websites

Learn best practices that takes years to learn in the design industry

Learn to make professional logos and design choices for all branding needs

Learn UI/UX best practices using the latest trends in the industry

Learn to be a designer as well as a web developer at the same time (a rare combination of skills that is in high demand)!

 

The curriculum is going to be very hands on as we walk you from start to finish of working as a Designer, all the way into learning how to create final professional designs and then converting them into actual websites or apps using HTML and CSS. 

The topics covered in the course are...

 

• 00 Web & Mobile Design Principles +  Design vs Web Development

• 01 GETTING STARTED – Sketching, Inspiration + Structure

  • 1. Sketching

    • Intro to sketching

    • Sketching UX flows

    • Sketching tips

  • 2. Inspiration

    • How to stay inspired

    • How to find inspiration online

  • 3. User Flows

    • What are user flows?

    • The do’s and don’ts

    • Speeding up our workflow with components

    • Creating our own user flows (Registration) Part 1

    • Creating our own user flows (Search) Part 2

    • Creating our own user flows (Checkout) Part 3

  • 4. Sitemaps

    • An intro to sitemaps

    • Creating a basic sitemap

    • What you should be doing before you start

    • Creating a sitemap (part 1)

    • Creating a sitemap (part 2)

    • Tips for getting started

   

• 02 EXPLORE AND ITERATE – Wireframes, Prototyping and Feedback

  • 1. Wireframes

    • What is a wireframe?

    • How do I create a wireframe?

    • Speeding up your workflow in Figma

    • Creating our home page

    • Creating a product page

    • Creating a checkout page

  • 2. Prototyping

    • Prototyping basics in Figma (Device + Triggers)

    • Prototyping basics in Figma (Actions)

    • Prototyping basics in Figma (Overflow)

    • Prototyping basics in Figma (Presentation + Collaboration)

    • Linking together a quick user flow in Figma

    • Working on small interactions with Figma

  • 3. Getting feedback

    • Why is feedback so important?

    • How to get constructive feedback

   

• 03 VISUAL DESIGN – Design Theory + Accessibility

  • 1. Grids + Spacing

    • Spacing and Grid Basics

    • Responsive Grids in Figma

    • Creating our own grid in Figma

    • The rules of the grid

  • 2. Typography

    • Typography basics Part 1

    • Matching typefaces to an era

    • Typography basics Part 2

    • Selecting the right typeface

    • Typography basics Part 3

    • Picking a typeface

    • Does your typeface suit your scenario?

    • Expanding an existing type system

    • Choosing typefaces in Google Fonts

    • Narrowing down your typography choices

    • Creating a type system in Figma

  • 3. Color

    • Color Schemes

    • Important questions to ask before picking colors

    • Helpful tips for creating color palettes

    • Creating a monochromatic color palette

    • Applying a our simple color palette

    • Expanding a strict color palette

    • Creating our own color palette

  • 4. Forms + UI Elements

    • What are UI Elements

    • Best practices Part 1: Forms

    • Best practices Part 2: Inputs Part 1

    • Best practices Part 2: Inputs Part 2

    • Best practices Part 2: Inputs Part 3

    • Best practices Part 2: Inputs Part 4

    • Best practices Part 3: Buttons

    • How to create components in Figma

    • Using atomic elements in Figma

    • Using Instances in Figma

    • Editing instances to create new components

    • Using constraints to create responsive components

    • Creating a registration form in Figma

  • 5. Imagery + Iconography

    • Resources and techniques to create great visual assets

    • Working with photos in Figma Part 1

    • Working with photos in Figma Part 2

    • Working with illustrations in Figma

    • Using Figma plugins to find Icons quickly

    • Creating our very own custom icons

  • 6. Accessibility

    • What is accessibility?

    • Assistive technologies

    • Visual patterns for accessibility (Part 1)

    • Tools to make your design accessible

    • Visual patterns for accessibility (Part 2)

   

• 04 DESIGN EXPLORATION – Application Design + Design Systems

  • 1. Design Patterns

    • What are design patterns?

    • Why are design patterns valuable?

    • How to apply design patterns

    • Analyzing design patterns together

    • Dissecting and choosing design patterns together

  • 2. Mobile Design

    • Mobile design best practices (Part 1)

    • Mobile design best practices (Part 2)

  • 3. Applying Visual Design

    • Design Fidelity

    • Style exploration (Navigation)

    • Style exploration (Cards)

    • Style exploration (Interests)

    • Style exploration (New elements)

  •  

  • •  

   

• 05 PUTTING IT ALL TOGETHER – Using our Design System and Hi-Fi prototyping with Figma

  • 1. Design Systems

    • What is a design system?

    • Foundation (color)

    • Foundation (grids and spacing)

    • Foundation (typography)

    • Foundation (iconography)

    • Components (buttons)

    • Components (Inputs)

    • Components (cards)

    • Recipes (card layouts)

    • Recipes (search)

    • Recipes (orders)

  • 2. Final Compositions

    • Using our design system (Search)

    • Using our design system (Product Description)

    • Using our design system (Cart)

   

• 06 FROM FIGMA TO WEBSITE (take a Figma design and convert it to a live website using HTML and CSS)

• 07 HTML + HTML5

• 08 CSS + CSS3 - CSS Basics, CSS Grid, Flexbox, CSS Animations

• 09 PUTTING YOUR WEBSITE ONLINE